<template>
  <div class="home">
    <div class="leftSide">
      <div class="sideLtop">
        <div class="backheader">
          <div class="xqpm">警情趋势</div>
          <div class="timeline">
            <timeline-chart
              :data="chartData"
              :height="32"
              heightType="vh"
              type="传统"
              :legend="['当前警情', '去年同期']"
              @zrender:click="chartClickLineEl"
              :fieldNames="{ name: 'dataDate', values: ['caseNum', 'yoyCaseNum'] }"
            />
          </div>
        </div>
      </div>
      <div class="sideLtop" style="margin-top: 10%">
        <div class="backheader">
          <div class="xqpm">辖区警情统计</div>
          <div class="timeline">
            <pie
              :data="chartArr"
              :height="25"
              heightType="vh"
              :fieldNames="{
                name: 'classifyName',
                value: 'caseNum',
              }"
              @zrender:click="pieRenderClickHandle"
              v-if="chartArr.length"
              style="margin-top: 60px"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="rghtSide">
      <div class="rghtSideTop">
        <div class="earlywarning">
          <div style="position: absolute; left: -15px">
            <img src="@/assets/yujing-red.png" alt="" />
          </div>
          <div class="earlywarning-indfo">
            <div class="earlywarning-title">
              <div>{{ redData.name }}</div>
              <div>
                <span>{{ redData.num }}</span>
                个
              </div>
            </div>
            <div class="earlywarning-right">
              <div class="earlywarning-type" v-for="(item, index) in redData.top3" :key="index">
                <div class="triangle"></div>
                <a href="javascript:;">{{ item.modelName }}</a>
              </div>
            </div>
          </div>
        </div>
        <div class="earlywarning">
          <div style="position: absolute; left: -15px">
            <img src="@/assets/yujing-orange.png" alt="" />
          </div>
          <div class="earlywarning-indfo-orange">
            <div class="earlywarning-title" style="color: #ff6f1c">
              <div>{{ orangeData.name }}</div>
              <div>
                <span>{{ orangeData.num }}</span>
                个
              </div>
            </div>
            <div class="earlywarning-right">
              <div class="earlywarning-type" v-for="(item, index) in orangeData.top3" :key="index">
                <div class="triangle"></div>
                <a href="javascript:;">{{ item.modelName }}</a>
              </div>
            </div>
          </div>
        </div>
        <div class="earlywarning">
          <div style="position: absolute; left: -15px">
            <img src="@/assets/yujing-yellow.png" alt="" />
          </div>
          <div class="earlywarning-indfo-yellow">
            <div class="earlywarning-title" style="color: #ecd60d">
              <div>{{ yellowData.name }}</div>
              <div>
                <span>{{ yellowData.num }}</span>
                个
              </div>
            </div>
            <div class="earlywarning-right">
              <div class="earlywarning-type" v-for="(item, index) in yellowData.top3" :key="index">
                <div class="triangle"></div>
                <a href="javascript:;">{{ item.modelName }}</a>
              </div>
            </div>
          </div>
        </div>
        <div class="earlywarning">
          <div style="position: absolute; left: -15px">
            <img src="@/assets/yujing-blue.png" alt="" />
          </div>
          <div class="earlywarning-indfo-blue">
            <div class="earlywarning-title" style="color: #1cdaff">
              <div>{{ blueData.name }}</div>
              <div>
                <span>{{ blueData.num }}</span>
                个
              </div>
            </div>
            <div class="earlywarning-right">
              <div class="earlywarning-type" v-for="(item, index) in blueData.top3" :key="index">
                <div class="triangle"></div>
                <a href="javascript:;">{{ item.modelName }}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sideLtop" style="margin-top: 10%">
        <div class="backheader">
          <div class="xqpm">要素排名</div>
          <div class="timeline" style="padding: 10px; height: 20%">
            <div class="essential title" style="margin-top: 30px">
              <div>
                <div class="triangle"></div>
                要素
              </div>
              <div>预警数量</div>
            </div>
          </div>
        </div>
        <div style="height: 83%; overflow: auto; margin-top: 28px">
          <div
            class="timeline"
            style="padding: 5px 10px"
            v-for="(item, index) in SeriesQuery.list"
            :key="index"
          >
            <div class="essential info">
              <div>
                <div class="triangle"></div>
                [{{ item.featureName }}]
                {{ item.featureValue }}
              </div>
              <div>{{ item.caseNum }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <police-list-drawer
      v-model:visible="tabVisible"
      :title="drawerName"
      :tabs="policeTabs"
      topicType="ct"
    ></police-list-drawer>
    <list
      v-model:visible="visible"
      title="辖区警情统计"
      :portionUrl="portionUrl"
      :params="params"
      topicType="ct"
    />
  </div>
</template>
<script lang="ts">
import { ref, defineComponent, onMounted, reactive } from 'vue';
import TimelineChart from '@/components/charts/line/index.vue';
import { queryCaseTrend, queryClassifyList } from '@/api/intelligentanalysis/statisticsanalysis';
import moment from 'moment';
import Pie from '@/components/charts/pie/simple-pie/index.vue';
import list from '@/components/police-list-drawer/index.vue';
import { isNil } from 'lodash-es';
import {
  deaqueryVaryTrend,
  queryTime,
  deaqueryXqdwPieChart,
} from '@/api/intelligentanalysis/alert';
import PoliceListDrawer from '@/components/police-list-drawer/index.vue';
import { queryFourColourTop3 } from '@/api/magic-cube/four-color';
import { getSeriesQuery } from '@/api/study-judge/list/research-list';
export default defineComponent({
  name: '',
  components: {
    TimelineChart,
    Pie,
    PoliceListDrawer,
    list,
  },
  setup() {
    const tabVisible = ref<boolean>(false);
    const drawerName = ref<any>('');
    const portionUrl = ref<any>('');
    const visible = ref<any>(false);
    const params = ref<any>([]);
    const policeTabs = ref<Array<any>>([]);
    //   查询条件
    const queryFrom = reactive({
      callTimeStart: '2020-10-01 00:00:00',
      callTimeEnd: '2021-10-01 00:00:00',
      otherFlag: 'Y',
    });
    const chartData = ref<Array<any>>([]);
    //警情趋势
    const handlequeryCaseTrend = () => {
      deaqueryVaryTrend(queryFrom).then(res => {
        chartData.value = res.data.dataList;
        console.log('222', chartData.value);
      });
    };
    const lineParams = [
      {
        name: '当期警情',
        url: '/aitype/caseInfo/queryCaseInfo',
        params: reactive({
          callTimeStart: '',
          callTimeEnd: '',
          page: 1,
          size: 10,
        }),
      },
      {
        name: '去年同期',
        url: '/aitype/caseInfo/queryCaseInfo',
        params: reactive({
          callTimeStart: '',
          callTimeEnd: '',
          page: 1,
          size: 10,
        }),
      },
    ];
    //警情趋势图点击
    const chartClickLineEl = (index, item) => {
      tabVisible.value = true;
      drawerName.value = '警情趋势';
      lineParams[0].params.callTimeStart = `${item.dataDate} 00:00:00`;
      lineParams[0].params.callTimeEnd = `${item.dataDate} 23:59:59`;

      lineParams[1].params.callTimeStart = `${moment(item.dataDate)
        .subtract(1, 'years')
        .format('YYYY-MM-DD')} 00:00:00`;
      lineParams[1].params.callTimeEnd = `${moment(item.dataDate)
        .subtract(1, 'years')
        .format('YYYY-MM-DD')} 23:59:59`;
      policeTabs.value = lineParams;
    };
    //辖区警情统计
    const chartArr = ref<Array<any>>([]);
    const handlequeryClassifyList = () => {
      deaqueryXqdwPieChart(queryFrom).then(res => {
        res.data.forEach(item => {
          item.value = item.caseNum;
        });
        chartArr.value = res.data;
      });
    };
    //点击辖区单位
    const pieRenderClickHandle = (e: any) => {
      const dataIndex = e?.target?.dataIndex;
      if (!isNil(dataIndex)) {
        visible.value = true;
        portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
        params.value = {
          callTimeStart: queryFrom.callTimeStart,
          callTimeEnd: queryFrom.callTimeEnd,
          otherFlag: queryFrom.otherFlag,
          xqdwCode: chartArr.value[dataIndex].code,
          page: 1,
          size: 10,
        };
      }
    };
    //获取时间
    const handlequeryTime = () => {
      queryTime({ module: 'ZNFX' }).then(res => {
        if (res.code === 200) {
          queryFrom.callTimeStart = res.data.callTimeStart;
          queryFrom.callTimeEnd = res.data.callTimeEnd;
          //   handlequeryCaseTrend();
        }
      });
    };
    //预警
    const redData = ref<any>({});
    const orangeData = ref<any>({});
    const yellowData = ref<any>({});
    const blueData = ref<any>({});
    const FourColourTop3 = ref<any>([]);
    const handlequeryFourColourTop3 = () => {
      const params = {
        // callTimeStart: queryFrom.callTimeStart || '',
        // callTimeEnd: queryFrom.callTimeEnd || '',
      };
      queryFourColourTop3(params).then(res => {
        if (res.code === 200) {
          res.data.forEach(item => {
            if (item.yjLevel == 1) {
              redData.value = item;
              redData.value.name = '红色预警';
            }
            if (item.yjLevel == 2) {
              orangeData.value = item;
              orangeData.value.name = '橙色预警';
            }
            if (item.yjLevel == 3) {
              yellowData.value = item;
              yellowData.value.name = '黄色预警';
            }

            if (item.yjLevel == 4) {
              blueData.value = item;
              blueData.value.name = '蓝色预警';
            }
          });
          FourColourTop3.value = res.data;
        }
      });
    };
    //要素排名
    const SeriesQuery = ref<any>([]);
    const handlegetSeriesQuery = () => {
      let obj: any = queryFrom;
      obj.page = 1;
      obj.size = 10;
      getSeriesQuery(obj).then(res => {
        SeriesQuery.value = res.data;
      });
    };
    onMounted(() => {
      handlequeryTime();
      handlequeryCaseTrend();
      handlequeryFourColourTop3();
      handlegetSeriesQuery();
      handlequeryClassifyList();
    });
    return {
      FourColourTop3,
      chartData,
      chartArr,
      tabVisible,
      drawerName,
      policeTabs,
      chartClickLineEl,
      portionUrl,
      params,
      visible,
      pieRenderClickHandle,
      redData,
      orangeData,
      yellowData,
      blueData,
      SeriesQuery,
    };
  },
});
</script>
<style lang="less">
// TODO
.home {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(~@/assets/ditu.jpg);
  background-repeat: no-repeat;
  background-size: 100% 99%;
  .sideLtop {
    height: 45%;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid;
    border-top: 0;
    border-image: linear-gradient(0deg, #57617b 10%, rgba(43, 45, 51, 0) 100%);
    border-image: -webkit-linear-gradient(#202126, #57617b) 1 100;
    border-image: -moz-linear-gradient(#202126, #57617b) 1 100;
    border-image: linear-gradient(#202126, #57617b) 1 100;
  }
  .backheader {
    position: relative;
    height: 4vh;
    background-image: url(~@/assets/image/statistics/b1.png);
    background-repeat: no-repeat;
    background-size: 100% 86%;
    .xqpm {
      position: absolute;
      top: -5px;
      left: 18px;
      color: #ffffff;
      font-weight: bold;
      font-size: 16px;
      font-family: Source Han Sans CN;
    }
    .timeline {
      height: 50%;
      padding-top: 30px;
    }
  }
  .leftSide {
    position: absolute;
    left: 2px;
    width: 400px;
    height: 90%;
    margin-top: 2.5%;
  }
  .rghtSide {
    position: absolute;
    right: 2px;
    width: 400px;
    height: 90%;
    margin-top: 2.5%;
    .rghtSideTop {
      height: 40%;
      .earlywarning {
        display: flex;
        width: 404px;
        height: 91px;
        margin-bottom: 20px;
        .earlywarning-indfo {
          display: flex;
          width: 100%;
          padding: 10px 0;
          background-image: url(~@/assets/redju.png);
        }
        .earlywarning-right {
          width: 45%;
        }
        .earlywarning-indfo-orange {
          display: flex;
          width: 100%;
          padding: 10px 0;
          background-image: url(~@/assets/orangeju.png);
          .earlywarning-right {
            .triangle {
              position: absolute;
              top: 5px;
              left: 3px;
              width: 0;
              height: 0;
              border-top: 6px solid #ff6f1c;
              border-right: 6px solid transparent;
            }
            .earlywarning-type {
              background: #552c17;
            }
            a {
              color: #ff6f1c;
            }
          }
        }
        .earlywarning-indfo-yellow {
          display: flex;
          width: 100%;
          padding: 10px 0;
          background-image: url(~@/assets/yellowju.png);
          .earlywarning-right {
            .triangle {
              position: absolute;
              top: 5px;
              left: 3px;
              width: 0;
              height: 0;
              border-top: 6px solid #ecd60d;
              border-right: 6px solid transparent;
            }
            .earlywarning-type {
              background: #504b12;
            }
            a {
              color: #ecd60d;
            }
          }
        }
        .earlywarning-indfo-blue {
          display: flex;
          width: 100%;
          padding: 10px 0;
          background-image: url(~@/assets/blueju.png);
          .earlywarning-type {
            background: #114c5a;
          }
          .earlywarning-right {
            .triangle {
              position: absolute;
              top: 5px;
              left: 3px;
              width: 0;
              height: 0;
              border-top: 6px solid #1cdaff;
              border-right: 6px solid transparent;
            }
            a {
              color: #1cdaff;
            }
          }
        }
        .earlywarning-title {
          width: 50%;

          padding-left: 85px;
          color: #ff1b3f;
          font-weight: 400;
          font-size: 14px;
          font-family: Source Han Sans CN;
          border-right: 1px solid;
          span {
            font-size: 40px;
          }
        }
        .earlywarning-type {
          position: relative;
          width: 127px;
          width: 100%;
          margin-left: 10px;
          color: #ff1b3f;
          font-weight: 400;
          font-size: 14px;
          font-family: Microsoft YaHei;
          text-decoration: underline;
          background: #551321;
          .triangle {
            position: absolute;
            top: 5px;
            left: 3px;
            width: 0;
            height: 0;
            border-top: 6px solid red;
            border-right: 6px solid transparent;
          }
          a {
            display: inline;
            margin-left: 10px;
            color: #ff1b3f;
          }
        }
        .earlywarning-type:nth-child(2) {
          margin: 5px 0 5px 10px;
        }
      }
    }
    .title {
      color: #b9c4dd;
      background: #363c4f;
    }
    .info {
      background: #171a22;
      border: 1px solid #363c4f;
    }
    .ranking {
      height: 100%;
      overflow: auto;
    }
    .essential {
      position: relative;
      display: flex;
      justify-content: space-between;
      width: 100%;

      padding: 8px 10px;
      font-size: 14px;
      .triangle {
        position: absolute;
        top: 5px;
        left: 3px;
        width: 0;
        height: 30px;
        height: 0;
        border-top: 6px solid #1cdaff;
        border-right: 6px solid transparent;
      }
    }
  }
}
</style>
